<template>
  <div>
    <!-- 导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面板 -->
    <el-card>
      <el-row :gutter="20">
         <el-col :span="16">
          <!-- <el-input placeholder="请输入内容"><el-button slot="append" icon='el-icon-search'></el-button></el-input> -->
         </el-col>
         <el-col :span="4">
          <el-button @click="addbox=true " type="primary">添加用户</el-button>
         </el-col>
      </el-row>
      <!-- //表格 -->
          <el-table :data="userList.records" border stripe>
            <el-table-column prop='id' label="序号"></el-table-column>
            <el-table-column prop="userName" label="用户名"></el-table-column>
            <el-table-column prop="userPwd" label="密码"></el-table-column>
            <el-table-column prop="createDate" label="创建时间"></el-table-column>
            <el-table-column prop="isUse" label="是否可用"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                
               <el-button @click="showEdit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>

                 <el-button @click="showDel(scope.row.id)" size="mini" type="danger" icon='el-icon-delete' ></el-button>
                </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
           <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
           :current-page="page.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
           </el-pagination>
    </el-card>

     <!-- 修改用户框  -->
     <el-dialog title="修改用户" :visible.sync="editbox">
      <el-form :model="updFrom">
         <el-form-item label="用户名" prop="email">
            <el-input v-model="updFrom.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="mobile">
            <el-input v-model="updFrom.userPwd"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="editbox=false">取 消</el-button>
         <el-button @click="updateUser" type="primary">确 定</el-button>
      </div>
      </el-dialog>

      <!-- 新增用户框  -->
     <el-dialog title="新增用户" :visible.sync="addbox">
      <el-form ref="addfrom" :model="addfrom">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="addfrom.userName"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPwd">
            <el-input v-model="addfrom.userPwd"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button @click="addbox=false">取 消</el-button>
         <el-button @click="adduser" type="primary">确 定</el-button>
      </div>
      </el-dialog>

  </div>
</template>

<script>
export default {
    data(){
        return{
            userList:[],
            total: 0,
            page:{
              pageNum:1,
              pageSize:5
            },
            editbox: false,  //显示修改框
            addbox: false ,  //显示新增框
            updFrom:{
              id:0,
              userName:"",
              userPwd:"",
              isUse:1,
            },
            addfrom:{
              userName:"",
              userPwd:"",
              isUse:1
            }
        }
    },
    created(){
        this.getUserList()
        document.title="管理员列表"
    },methods:{
      async showDel(id){
        let ok=await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err);
        if(ok!='confirm'){
          return this.$message.info('你取消了删除')
        }
        let ret=await this.$http.delete(`/admin/user/del/${id}`);
        if(ret.code != 200){
           return this.$message.error(ret.message )
        }
        this.$message.success(ret.message)
        console.log(ret);
        this.getUserList()
      },
      // 添加
      async adduser(){
        let ret=await this.$http.post('/admin/user/add',this.addfrom)
        if(ret.code != 200){
           return this.$message.error(ret.message )
        }
        this.$message.success(ret.message)
        this.addbox=false;
        this.getUserList();  //刷新
      },
      showEdit(row){//获取修改信息
        //  console.log("修改", row );
         this.updFrom.id=row.id;
         this.updFrom.userName=row.userName;
         this.updFrom.userPwd=row.userPwd;
         this.editbox = true   //显示
      },
      async updateUser(){//修改
      let ret=await this.$http.put('/admin/user/upd',this.updFrom)
        if(ret.code != 200){
           return this.$message.error(ret.message )
        }
        this.$message.success(ret.message)
        console.log(ret);
        this.editbox = false
        this.getUserList();  //刷新
      },
        async getUserList(){
            let ret = await this.$http.get('/admin/user/users', {params: this.page});
            this.userList=ret.data;
            this.total=ret.data.total;
        },
        handleSizeChange(size){
        //  console.log('变化每页条数',size);
         this.page.pageSize = size 
         this.getUserList();  //刷新
      },
      handleCurrentChange(p){
        //  console.log('变化页码',p);
         this.page.pageNum = p 
         this.getUserList();  //刷新
      },
    }
}
</script>

<style>

</style>